<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .top{
        height: 50px;
        top: 0px;
        left: 0px;
        border: red solid 1px;
    }
    .container{
        display: flex;
        flex-direction: row;
    }
    .sider{
        width: 120px;
        height: 100%;
        top:50px;
        left: 0px;
        bottom: 0px;
        border: red solid 1px;
    }
    .content{
        top:50px;
        left: 60px;
        right: 0px;
        bottom: 0px;
        border: red solid 1px;
    }

  </style>
</head>
<body>
<div id="app">
  <div class="top"></div>
  <div class="container">
    <div class="sider">
      <ul>
        <li><router-link to="/hello">hello</router-link></li>
        <li><router-link to="/rui">rui</router-link></li>
      </ul>
    </div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</div>
</body>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script type="application/javascript" src="https://unpkg.com/vue-router@4"></script>
<script>
  const hello = {
    template:`<div><h3>hello world</h3></div>`
  }
  const rui = {
    template:`<div><h3>hello Rui</h3></div>`
  }
  const routes =[
    {path:'/hello',component:hello},
    {path:'/rui',component: rui}
  ]

  const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
  })

  const app = {

  }
  Vue.createApp(app).use(router).mount("#app");
</script>
</html>